<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    函数的防抖和节流

    <input type="text">
</body>
</html>
<script> 
// 模拟后台的接口请求
 function axios (val) {
    return new Promise((resolve,reject) => {
       setTimeout(() => {
          resolve('请求成功:'+val);
       },1000)
    })
 }


//   let dom = document.querySelector('input');
//   dom.oninput = function (e) { // 优化，当用户输入完成之后 两三秒的时间，我们再去发送请求。
//     axios(e.target.value).then(res => {
//         console.log(res);
//     });
//   }
 
  // 节流: n 秒内只运⾏⼀次，若在 n 秒内重复触发，只有⼀次⽣效 节流优化上面请求的函数


//   let dom = document.querySelector('input');
//   let time = null;
//   dom.oninput = function (e) { // 优化，当用户输入完成之后 两三秒的时间，我们再去发送请求。
//     if (time) {
//       return;
//     }
//     // 3:14:50 -> 3:14:53
//     time = setTimeout(() => {
//       axios(e.target.value).then(res => {
//         console.log(res);
//      });
//      time = null;
//     },3000)
//   }


// 防抖: n 秒后在执⾏该事件，若在 n 秒内被重复触发，则重新计时

// let dom = document.querySelector('input');
//   let time = null;
//   dom.oninput = function (e) { // 优化，当用户输入完成之后 两三秒的时间，我们再去发送请求。
//     if (time) {
//       clearTimeout(time);
//     }
//     // 3:14:50 -> 3:14:56
//     time = setTimeout(() => {
//       axios(e.target.value).then(res => {
//         console.log(res);
//      });
//     },3000)
//   }




  function debounce(func, wait) { // func 回调函数 wait 等待时间
    let timeout;
    return function () {
        let context = this;
        let args = arguments;
        if (timeout) clearTimeout(timeout);      
        timeout = setTimeout(() => {
            func.apply(context, args)
        }, wait);
    }
}

// let dom = document.querySelector('input');
// dom.oninput = debounce((e) => {
//     axios(e.target.value).then(res => {
//         console.log(res);
//     });
// },1000)
</script>